<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-20 13:15:09
 * @LastEditors: 刘引
 * @LastEditTime: 2021-12-23 16:13:08
-->
<template>
  <div class="root" id="content">
    <div class="expansion" @click="showAside" ref="expansion">
      展开
      <br />
      <span>&lt;</span>
    </div>
    <div class="container" ref="aside">
      <ul>
        <li>
          <svg
            t="1640222412288"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3115"
            width="30"
            height="30"
          >
            <path
              d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
              fill="#FAAD08"
              p-id="3116"
            />
            <path
              d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
              fill="#FAAD08"
              p-id="3117"
            />
            <path
              d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
              fill="#000000"
              p-id="3118"
            />
            <path
              d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
              fill="#000000"
              p-id="3119"
            />
            <path
              d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
              fill="#FFFFFF"
              p-id="3120"
            />
            <path
              d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
              fill="#FAAD08"
              p-id="3121"
            />
            <path
              d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
              fill="#000000"
              p-id="3122"
            />
            <path
              d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
              fill="#FFFFFF"
              p-id="3123"
            />
            <path
              d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
              fill="#EB1C26"
              p-id="3124"
            />
            <path
              d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
              fill="#EB1C26"
              p-id="3125"
            />
          </svg>
          <span>
            在线
            <br />咨询
          </span>
        </li>
        <li>
          <svg
            t="1640223026204"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5668"
            width="28"
            height="28"
          >
            <path
              d="M944.626667 731.686667a149.82 149.82 0 0 0-31.713334-66.313334L758.766667 480.4A148.926667 148.926667 0 0 0 644.046667 426.666667H379.953333a148.926667 148.926667 0 0 0-114.72 53.733333L111.086667 665.373333a149.82 149.82 0 0 0-31.713334 66.313334L58.393333 836.6A85.333333 85.333333 0 0 0 142.066667 938.666667h739.866666a85.333333 85.333333 0 0 0 83.673334-102.066667z m-29.7 148.666666a42.513333 42.513333 0 0 1-32.993334 15.646667H142.066667a42.666667 42.666667 0 0 1-41.84-51.033333l20.986666-104.913334a107.013333 107.013333 0 0 1 22.666667-47.333333L298 507.713333A106.38 106.38 0 0 1 379.953333 469.333333h264.093334A106.38 106.38 0 0 1 726 507.713333L880.14 692.666667a107.013333 107.013333 0 0 1 22.666667 47.333333l20.986666 104.913333a42.52 42.52 0 0 1-8.866666 35.473334zM630 547.213333C598.2 524.506667 556.3 512 512 512s-86.2 12.506667-118 35.213333c-16.146667 11.533333-28.92 25.126667-37.96 40.4C346.28 604.1 341.333333 621.72 341.333333 640s4.946667 35.9 14.713334 52.386667c9.04 15.273333 21.813333 28.866667 37.96 40.4C425.8 755.493333 467.7 768 512 768s86.2-12.506667 118-35.213333c16.146667-11.533333 28.92-25.126667 37.96-40.4 9.766667-16.486667 14.713333-34.106667 14.713333-52.386667s-4.946667-35.9-14.713333-52.386667c-9.046667-15.273333-21.82-28.866667-37.96-40.4z m-24.8 150.853334c-24.62 17.58-57.72 27.266667-93.2 27.266666s-68.58-9.686667-93.193333-27.266666c-22.446667-16-34.806667-36.666667-34.806667-58.066667s12.36-42 34.806667-58.066667C443.42 564.353333 476.52 554.666667 512 554.666667s68.58 9.686667 93.193333 27.266666C627.64 598 640 618.586667 640 640s-12.36 42.033333-34.806667 58.066667z m232.76-548.18C750.533333 108.26 634.773333 85.333333 512 85.333333s-238.533333 22.926667-325.953333 64.553334C93.586667 193.92 42.666667 254.333333 42.666667 320v53.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h192a53.393333 53.393333 0 0 0 53.333333-53.333334v-53.333333c0-13.253333 16.666667-28.9 43.566667-40.846667C418.493333 264.22 463.633333 256 512 256s93.506667 8.22 127.1 23.153333C666 291.1 682.666667 306.746667 682.666667 320v53.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h192a53.393333 53.393333 0 0 0 53.333333-53.333334v-53.333333c0-65.666667-50.92-126.08-143.38-170.113333zM938.666667 373.333333a10.666667 10.666667 0 0 1-10.666667 10.666667h-192a10.666667 10.666667 0 0 1-10.666667-10.666667v-53.333333c0-31.733333-24.473333-60.086667-68.906666-79.833333C617.5 222.86 566.206667 213.333333 512 213.333333s-105.5 9.526667-144.426667 26.833334C323.14 259.913333 298.666667 288.266667 298.666667 320v53.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H96a10.666667 10.666667 0 0 1-10.666667-10.666667v-53.333333c0-23.42 10.033333-46.593333 29.82-68.873333 20.666667-23.253333 50.666667-44.36 89.233334-62.713334C286.2 149.453333 395.446667 128 512 128s225.8 21.453333 307.613333 60.413333c38.553333 18.353333 68.573333 39.46 89.233334 62.713334C928.666667 273.406667 938.666667 296.58 938.666667 320z"
              fill="#da5d28"
              p-id="5669"
            />
          </svg>
          <div class="phone-contact_hover">
            <h3>服务热线</h3>
            <p>400-800-5383</p>
            <p>189-2740-7692</p>
            <h3>服务时间</h3>
            <p>周一至周六9:00~18:00</p>
          </div>
          <span>热线</span>
        </li>
        <li>
          <svg
            t="1640223168260"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8492"
            width="28"
            height="28"
          >
            <path
              d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z"
              p-id="8493"
              fill="#71c039"
            />
          </svg>
          <span>
            微信
            <br />咨询
          </span>
          <div class="chat-code">
            <svg
              t="1640226120174"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="18849"
              width="100"
              height="100"
            >
              <path
                d="M152.075264 123.511808c101.716992 0 203.435008 0 305.152 0 31.031296 3.073024 23.552 57.696256 23.552 93.184 0 63.742976 0 105.755648 0 168.96 0 36.721664 6.915072 81.729536-17.408 92.16-15.840256 6.793216-58.351616 2.048-78.848 2.048-56.271872 0-102.012928 0-161.792 0-37.400576 0-88.469504 8.927232-94.208-23.552 0-103.083008 0-206.164992 0-309.248C132.70528 135.544832 140.061696 127.200256 152.075264 123.511808zM194.059264 193.143808c0 73.387008 0 146.772992 0 220.16 73.387008 0 146.772992 0 220.16 0 0-74.411008 0-148.820992 0-223.232-73.044992 0-146.091008 0-219.136 0C193.890304 190.24384 193.9712 191.690752 194.059264 193.143808z"
                p-id="18850"
              />
              <path
                d="M561.675264 123.511808c101.716992 0 203.435008 0 305.152 0 12.447744 4.61824 21.001216 13.1328 23.552 27.648 0 100.352 0 200.705024 0 301.056-2.792448 12.510208-9.324544 23.196672-21.504 26.624-19.904512 5.600256-52.977664 1.024-76.8 1.024-56.127488 0-102.14912 0-156.672 0-23.626752 0-58.642432 4.97664-77.824-1.024-27.077632-8.471552-19.456-61.329408-19.456-98.304 0-49.115136 0-106.445824 0-157.696C538.123264 180.148224 528.75264 129.476608 561.675264 123.511808zM603.659264 193.143808c0 73.387008 0 146.772992 0 220.16 73.387008 0 146.772992 0 220.16 0 0-74.411008 0-148.820992 0-223.232-73.044992 0-146.091008 0-219.136 0C603.490304 190.24384 603.5712 191.690752 603.659264 193.143808z"
                p-id="18851"
              />
              <path
                d="M294.411264 257.655808c30.661632-5.786624 54.774784 14.930944 55.296 43.008 0.687104 37.025792-37.129216 57.365504-66.56 41.984C249.47712 325.050368 251.693056 265.71776 294.411264 257.655808z"
                p-id="18852"
              />
              <path
                d="M704.011264 257.655808c72.223744-13.493248 70.839296 100.886528 0 89.088C658.929664 339.23584 657.47456 266.350592 704.011264 257.655808z"
                p-id="18853"
              />
              <path
                d="M455.179264 895.607808c-100.692992 0-201.385984 0-302.08 0-12.540928-3.843072-21.01248-11.75552-24.576-24.576 0-102.740992 0-205.483008 0-308.224 2.982912-9.019392 9.868288-19.542016 20.48-22.528 20.0448-5.640192 52.7872-1.024 76.8-1.024 55.189504 0 105.184256 0 156.672 0 23.154688 0 56.85248-5.168128 77.824 1.024 28.371968 8.37632 20.48 60.376064 20.48 97.28 0 56.7296 0 105.121792 0 162.816C480.779264 840.206336 489.356288 892.051456 455.179264 895.607808zM194.059264 608.887808c0 73.388032 0 146.772992 0 220.16 73.387008 0 146.772992 0 220.16 0 0-74.411008 0-148.820992 0-223.232-73.044992 0-146.091008 0-219.136 0C193.890304 605.98784 193.9712 607.434752 194.059264 608.887808z"
                p-id="18854"
              />
              <path
                d="M890.379264 566.903808c0 28.672 0 57.344 0 86.016-2.388992 29.014016-0.342016 62.462976-1.024 93.184-72.704 0-145.408 0-218.112 0 0-16.724992 0-33.451008 0-50.176-20.481024-2.387968-45.395968-0.342016-67.584-1.024-2.388992 64.854016-0.340992 134.142976-1.024 200.704-13.312 0-26.624 0-39.936 0-34.337792-6.882304-24.576-58.407936-24.576-99.328 0-57.078784 0-104.042496 0-158.72 0-23.865344-4.830208-59.64288 1.024-78.848 6.984704-22.913024 37.274624-19.456 67.584-19.456 51.24096 0 96.891904 0 148.48 0 0 45.396992 0 90.795008 0 136.192 22.868992 0 45.739008 0 68.608 0 0.681984-45.056-1.364992-92.841984 1.024-136.192C857.858048 537.302016 888.439808 537.783296 890.379264 566.903808z"
                p-id="18855"
              />
              <path
                d="M299.531264 672.375808c32.740352-3.623936 59.804672 27.841536 47.104 62.464-17.604608 47.98976-101.778432 29.953024-86.016-30.72C264.976384 687.348736 277.561344 674.807808 299.531264 672.375808z"
                p-id="18856"
              />
              <path
                d="M744.971264 895.607808c-24.576 0-49.152 0-73.728 0 0.681984-26.284032-1.363968-55.294976 1.024-79.872 24.235008 0 48.468992 0 72.704 0C744.971264 842.359808 744.971264 868.983808 744.971264 895.607808z"
                p-id="18857"
              />
              <path
                d="M890.379264 815.735808c0 17.408 0 34.816 0 52.224-2.84672 14.56128-11.36128 23.45472-24.576 27.648-17.408 0-34.816 0-52.224 0 0.681984-26.284032-1.363968-55.294976 1.024-79.872C839.862272 815.735808 865.120256 815.735808 890.379264 815.735808z"
                p-id="18858"
              />
            </svg>
            <p>扫描二维码咨询</p>
          </div>
        </li>
        <li>
          <svg
            t="1640223305229"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12420"
            width="28"
            height="28"
          >
            <path
              d="M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827z"
              p-id="12421"
              fill="#e28056"
            />
            <path
              d="M512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z"
              p-id="12422"
              fill="#e28056"
            />
          </svg>
          <span>
            提交
            <br />询价
          </span>
        </li>
        <li>
          <svg
            t="1640223509252"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="16985"
            width="28"
            height="28"
          >
            <path
              d="M900.2496 525.07648v352.19456a46.65344 46.65344 0 0 1-46.61248 46.60224H149.26848a46.6432 46.6432 0 0 1-46.60224-46.60224V172.89216a46.66368 46.66368 0 0 1 46.60224-46.60224H501.4528v-40.96H149.26848c-48.2816 0-87.56224 39.28064-87.56224 87.56224v704.37888c0 48.2816 39.28064 87.56224 87.56224 87.56224h704.36864c48.29184 0 87.57248-39.28064 87.57248-87.56224V525.07648h-40.96z"
              p-id="16986"
              fill="#da5d28"
            />
            <path
              d="M935.2192 120.29952L515.93216 539.56608l-28.95872-28.95872L906.24 91.3408z"
              p-id="16987"
              fill="#da5d28"
            />
          </svg>
          <span>
            问题
            <br />反馈
          </span>
        </li>
        <li>
          <svg
            t="1640223461649"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="16016"
            width="28"
            height="28"
          >
            <path
              d="M86.186667 432.576a21.290667 21.290667 0 0 1 2.538666-17.450667l166.805334-259.477333A106.666667 106.666667 0 0 1 345.258667 106.666667h333.482666a106.666667 106.666667 0 0 1 89.728 48.981333l166.826667 259.477333a21.333333 21.333333 0 0 1-2.56 26.325334L594.986667 864.597333a106.666667 106.666667 0 0 1-166.357334 0.469334L136.533333 503.253333l-45.589333-55.893333a21.248 21.248 0 0 1-4.778667-14.784z m804.885333-7.317333l-158.506667-246.528A64 64 0 0 0 678.762667 149.333333H345.258667a64 64 0 0 0-53.845334 29.397334L130.773333 428.650667l38.890667 47.701333 292.16 361.898667a64 64 0 0 0 99.84-0.277334l329.386667-412.714666z m-152.64-39.466667a21.333333 21.333333 0 0 1 33.706667 26.176L577.92 661.76a85.333333 85.333333 0 0 1-132.586667 2.645333l-204.373333-242.218666a21.333333 21.333333 0 1 1 32.597333-27.52l204.373334 242.218666a42.666667 42.666667 0 0 0 66.304-1.322666l194.197333-249.770667z"
              p-id="16017"
              fill="#da5d28"
            />
          </svg>
          <span>
            会员
            <br />中心
          </span>
        </li>
        <li @click="hideAside">收起></li>
      </ul>
    </div>
    <div class="top" v-show="btnFlag" @click="backTop">
      <span>
        <svg
          t="1640229414724"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2031"
          width="16"
          height="16"
        >
          <path
            d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z"
            p-id="2032"
          />
        </svg>
      </span>
      <br />顶部
    </div>
  </div>
</template>

<script lang="ts">

export default {
  data() {
    return {
      btnFlag: false

    }
  },
  methods: {
    hideAside(): void {
      this.$refs.aside.style.transform = 'translateX(50px)';
      this.$refs.expansion.style.transform = 'translateX(0px)';
      // console.log();

    },
    showAside(): void {
      this.$refs.aside.style.transform = 'translateX(0px)';
      this.$refs.expansion.style.transform = 'translateX(20px)';
    },

    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },


  },
  mounted() {
    // this.judge();
    window.addEventListener('scroll', this.scrollToTop)
  },

  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  }




}
</script>

<style lang="scss" scoped>
.root {
  .container {
    // transform: translateX(100px);
    transition: all 0.5s;
    position: fixed;
    top: 440px;
    right: 0;
    width: 44px;
    height: 286px;
    border: 1px solid #cccccc;
    background-color: #ffffff;

    ul {
      li {
        text-align: center;
        // display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        .phone-contact_hover {
          position: absolute;
          right: 45px;
          display: none;
          width: 100px;
          height: 120px;
          border: 1px solid #cccccc;
          padding: 6px;
          h3 {
            border-bottom: 1px dotted #cccccc;
            margin-bottom: 5px;
            &::nth-child(2) {
              margin-top: 5px;
            }
          }
          p {
            color: #e46637;
            font-size: 12px;
          }
        }
        cursor: pointer;
        span {
          display: none;
        }
        &:hover {
          background-color: #e46637;
          span {
            display: block;
            color: #fff;
          }
          svg {
            display: none;
          }
          &:nth-last-child(1) {
            color: #fff;
          }
          .phone-contact_hover {
            display: block;
            background-color: #fff;

            cursor: auto;
          }
          .chat-code {
            display: block;
            svg {
              display: block;
            }
          }
        }
        &:nth-child(-n + 6) {
          height: 43px;
          border-bottom: 1px solid #cccccc;
        }
        &:nth-last-child(1) {
          color: #7e7e7e;
          padding: 3px 0px;
        }
        .chat-code {
          display: none;
          position: absolute;
          background-color: #fff;
          text-align: center;
          right: 45px;
          top: 88px;
          display: none;
          width: 100px;
          height: 120px;
          border: 1px solid #cccccc;
          padding: 6px;
          cursor: auto;
          p {
            border-top: 1px dotted #cccccc;
          }
        }
      }
    }
  }
  .expansion {
    position: fixed;
    top: 250px;
    right: 0px;
    transform: translateX(25px);
    transition: all 0.2s;
    width: 20px;
    height: 100px;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    // line-height: 30px;
    padding: 20px 0;
    background-color: #f9ede8;
    border: 1px solid #e46637;
    color: #e46637;
    font-size: 12px;
  }
  .top {
    position: fixed;
    bottom: 0px;
    right: 0px;
    text-align: center;
    border: 1px solid #cccccc;
    background-color: #fff;
    font-size: 12px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: all 0.2s;
  }
}
</style>